import React, { useState, useRef, useEffect } from 'react';

const MultiModalInput = ({ onSubmit }) => {
  const [inputText, setInputText] = useState('');
  const [files, setFiles] = useState([]);
  const [isExpanded, setIsExpanded] = useState(false);
  const textareaRef = useRef(null);

  // 自动调整输入框高度
  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 120)}px`;
    }
  }, [inputText]);

  const handleSend = () => {
    if (inputText.trim() === '' && files.length === 0) return;

    onSubmit({
      text: inputText,
      files: files
    });

    setInputText('');
    setFiles([]);
    setIsExpanded(false);
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
    }
  };

  const handleFileChange = (e) => {
    const selectedFiles = Array.from(e.target.files);
    setFiles([...files, ...selectedFiles]);
    setIsExpanded(true);
  };

  return (
    <div className="border-t bg-white">
      <div className="max-w-4xl mx-auto px-4 py-3">
        {files.length > 0 && (
          <div className="flex flex-wrap gap-2 mb-3">
            {files.map((file, index) => (
              <div key={index} className="relative">
                <img
                  src={URL.createObjectURL(file)}
                  alt="preview"
                  className="h-20 w-20 object-cover rounded-lg border border-gray-200"
                />
                <button
                  onClick={() => setFiles(files.filter((_, i) => i !== index))}
                  className="absolute -top-2 -right-2 bg-white text-gray-500 rounded-full p-1 w-5 h-5 flex items-center justify-center shadow-md border border-gray-200"
                >
                  ×
                </button>
              </div>
            ))}
          </div>
        )}

        <div className="relative flex flex-col">
          <div className="flex items-center relative bg-gray-50 rounded-lg border border-gray-200">
            <textarea
              ref={textareaRef}
              value={inputText}
              onChange={(e) => setInputText(e.target.value)}
              onFocus={() => setIsExpanded(true)}
              placeholder="有什么我能帮您的吗?"
              className="flex-1 p-3 pr-16 bg-transparent resize-none min-h-[44px] max-h-[120px] focus:outline-none"
              rows={1}
              onKeyDown={(e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                  e.preventDefault();
                  handleSend();
                }
              }}
            />

            <div className="absolute right-2 top-1/2 transform -translate-y-1/2 flex space-x-1">
              <label className="p-2 text-gray-400 hover:text-blue-500 rounded-full cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <input
                  type="file"
                  accept="image/*"
                  className="hidden"
                  onChange={handleFileChange}
                />
              </label>

              <button
                onClick={handleSend}
                disabled={inputText.trim() === '' && files.length === 0}
                className={`p-2 rounded-full ${inputText.trim() === '' && files.length === 0 ? 'text-gray-300' : 'text-blue-500 hover:bg-blue-50'}`}
              >
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z" clipRule="evenodd" transform="rotate(90)" />
                </svg>
              </button>
            </div>
          </div>

          {isExpanded && (
            <div className="flex justify-between items-center px-1 py-2 text-xs text-gray-500">
              <div>支持 Markdown 格式</div>
              <div>Shift + Enter 换行</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default MultiModalInput;